<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<input id='msg'><button id='send'>Send</button>
	<div id='output'></div>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
		(function () {
			var socket = io.connect('ws://localhost:8080'),
				output = document.getElementById('output'),
				send = document.getElementById('send');

			function logStr(eventStr, msg) {
				return '<div>' + eventStr + ': ' + msg + '</div>';
			}

			socket.on('connect', function () {

				send.addEventListener('click', function	() {
					var msg = document.getElementById('msg').value;

					socket.send(msg);			// send msg to server
					output.innerHTML += logStr('Sent', msg);		//	add info to webpage
				});

				socket.on('message', function (msg) {
					output.innerHTML += logStr('Recieved', msg);	// output to webpage when recieved msg from server
				});
			});
		}());
	</script>
</body>
</html>